<!-- 模板部分 -->
<template>
	<!-- 轮播图 -->
	<view>
		<swiper class="banner" autoplay="true" indicator-dots="true" interval="2000" duration="500" circular="true">
			<swiper-item v-for="(item,i) in infodata.imgList" :key="i">
				<!-- <navigator> -->
				<image class="banner-image" :src="item" mode="widthFix"></image>
				<!-- </navigator> -->
			</swiper-item>
		</swiper>
	</view>
	<!-- 名字 -->
	<view class="name">{{infodata.name}}</view>
	<!-- 介绍 -->
	<view class="container">
		<view class="date item">
			<text class="label">{{infodata.type === 0?'丢失':'拾到'}}时间</text>
			<text>{{infodata.date}}</text>
		</view>
		<view class="region item">
			<text class="label">{{infodata.type === 0?'丢失':'拾到'}}地点</text>
			<text>{{infodata.region}}</text>
		</view>
		<view class="desc ">
			<text>{{infodata.desc}}</text>
		</view>
	</view>
	<!-- 评论区 -->
	<view class="comment">
		<!-- 评论区列表 -->
		<view class="comment-list">
			<view class="commen-item" v-for="(item,i) in infodata.commentList" :key="i">
				<view class="comment-item-top">
					<view class="commen-user">
						<image class="avatar" :src="item.avatarUrl" mode=""></image>
						<text class="commen-name">{{item.nickName}}</text>
					</view>
					<!-- 内容 -->
					<view class="content">
						<text>
							{{item.content}}
						</text>
					</view>
				</view>
				<view class="comment-item-bottom">
					{{ formatTime(item.time)}}
				</view>
			</view>
		</view>
	</view>
	<!-- 评论下拉显示 -->
	<view class="noComment">
		<!-- 未评论的 -->
		<text class="noComment-text" v-if="commentLength > 0">没有更多评论了呢</text>
		<!-- 已评论的 -->
		<text class="noComment-text" v-else>还没有人评论呢</text>
	</view>

	<view class="bottom">
		<!-- 收藏 -->
		<uni-fav :checked="collecticon[0]" :star="true" :circle="true" @click="changeicon"
			:content-text="collecttText" />
		<!-- 认领 -->
		<button class="fav-renling" @click="toClaim" :disabled="infodata.state !== 0">{{
			infodata.state === 0 ? '认领' : (infodata.state === 1 ? '认领中' : '已认领')
		}}</button>
		<view class="bottom-left">
			<textarea class="fav-text" auto-height cols="30" :value="comment" @input="getComment" placeholder="请输入内容"
				rows="10" adjust-position @linechange="lineheight"></textarea>
		</view>
		<uni-icons class="comment-btn" color="#fff" type="paperplane" @click="submitComment"></uni-icons>
	</view>
	<!-- 悬浮按钮 -->
	<view class="fav-btn" @click="getWechat" :style="{bottom:45 + linetop +'px'}">
		<uni-icons type="chat" color="#fff" size="26"></uni-icons>
	</view>
	<!-- 认领弹出框 -->
	<uni-popup ref="popup">
		<view class="model">
			<view class="label">描述</view>
			<uni-easyinput type="textarea" autoHeight :value="desc" placeholder="请输入内容" clearable="true" trim="true"
				@input="getDesc"></uni-easyinput>
			<view class="label">相关证明</view>
			<button size="default" v-if="img_list.length === 0" @click="uploadImg">上传</button>
			<image :src="img_list" class="img" v-else mode="widthFix"></image>
			<view class="button-list">
				<button size="mini" type="warn" @click="cancel">取消</button>
				<button size="mini" type="primary" @click="submit">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		losedatastore
	} from '../../stroe/losedata.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	import {
		formatTime
	} from '../../utils/index.js'
	const collecticon = ref([false, true])
	const infodata = ref({})
	const currentIconIndex = ref(1)
	const comment = ref('')
	const popup = ref(null)
	const desc = ref('')
	const img_list = ref('')
	const linetop = ref(0)
	const login = ref(false)
	const commentLength = ref(0)
	const collecttText = ref({
		contentDefault: '收藏',
		contentFav: '已收藏'
	})
	// 点击事件
	const getComment = (e) => {
		comment.value = e.detail.value.trim()
	}
	const lineheight = (e) => {
		linetop.value = e.detail.height - 15
	}
	// 认领
	const toClaim = () => {
		if (!login.value) {
			uni.showToast({
				title: '请先登陆,在进行评论',
				icon: 'none'
			})
			return
		} else {
			popup.value.open()
		}
	}
	const cancel = () => {
		popup.value.close()
		desc.value = ''
		img_list.value = ''
	}
	const submit = () => {
		const openid = uni.getStorageSync('openid')
		if (!desc.value || !img_list.value) {
			uni.showToast({
				title: '存在必填项未填！',
				icon: 'none'
			})
			return
		}
		// 上传图片到服务器
		uni.uploadFile({
			url: 'http://localhost:80/uploadImg',
			filePath: img_list.value,
			name: 'file',
			success: (res) => {
				const {
					data
				} = res
				let {
					path
				} = JSON.parse(res.data)[0]
				let _path = `http://localhost:80/${path.replace(/\\/g, '/')}`
				img_list.value = _path
			}
		})
		http.post('/toClaim', {
			desc: desc.value,
			img_list: img_list.value,
			_id: infodata.value._id,
			openid: openid

		}).then((res) => {
			const {
				data
			} = res
			if (data === "success") {
				uni.switchTab({
					url: '/pages/home/home',
					success: () => {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					}
				})
				popup.value.close()
			} else {
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			}
		})

	}
	// 获取认领框的内容
	const getDesc = (e) => {
		desc.value = e
	}
	// 上传证明
	const uploadImg = () => {
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			sourceType: ['album', 'camera'],
			success(res) {
				const {
					tempFiles
				} = res
				img_list.value = tempFiles[0].tempFilePath

			}
		})
	}
	// 发表评论
	const submitComment = () => {
		// 没有登陆不能发表评论
		if (!login.value) {
			uni.showToast({
				title: '请先登陆,在进行评论',
				icon: 'none'
			})
			return
		} else {
			// 判断输入的内容是否为空
			if (comment.value.length === 0) {
				uni.showToast({
					title: '输入的内容不能为空',
					icon: 'none'
				})
				return
			}
			// 从缓存中拿出用户头像和昵称
			const Info = uni.getStorageSync('userinfo')
			// 发送数据到数据库
			http.post('/addComment', {
				avatarUrl: Info.avatarurl,
				nickName: Info.nickname,
				content: comment.value,
				_id: infodata.value._id,
				time: new Date().getTime()
			}).then((res) => {
				const {
					data: {
						status,
						data
					}
				} = res
				if (status === "success") {
					uni.showToast({
						title: '评论成功!',
						icon: 'none'
					})
					infodata.value = data
					comment.value = ''
				} else {
					uni.showToast({
						title: '评论失败！',
						icon: 'none'
					})
				}
			})
		}
	}
	// 获取联系方式的点击事件
	const getWechat = () => {
		// 弹窗
		if (!login.value) {
			uni.showToast({
				title: '请先登陆',
				icon: 'none'
			})
			return
		} else {
			uni.showModal({
				title: '联系方式',
				content: infodata.value.phone,
				confirmText: '复制',
				cancelText: '取消',
				success: function(res) {
					if (res.confirm) {
						uni.setClipboardData({
							data: infodata.value.phone,
							success: () => {
								uni.showToast({
									title: '已复制',
									icon: 'none'
								})
							}
						})
					}
				}
			})
		}
	}
	// 判断收藏状态
	const openid = uni.getStorageSync('openid')
	// 点击收藏事件
	const changeicon = () => {
		if (!login.value) {
			uni.showToast({
				title: '请先登陆,在进行评论',
				icon: 'none'
			})
			return
		} else {
			// 将数据的两个图标进行调换实现切换样式
			collecticon.value = collecticon.value.reverse()
			const {
				_id,
				// type
			} = infodata.value
			if (collecticon.value[0] === true) {
				// 想收藏
				//发送_id和openid去收藏表
				http.post('/toCollection', {
					id: _id,
					openid: openid,
					// type: type
				}).then((res) => {
					const {
						data
					} = res
					if (data === "success") {
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						})
					}
				})
			} else {
				// 想取消收藏
				//发送_id和openid去收藏表中的数据
				http.post('/cancelCollection', {
					id: _id,
					openid: openid
				}).then((res) => {
					const {
						data
					} = res
					if (data === "success") {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
					}
				})
			}
		}
	}
	onLoad((options) => {
		login.value = !!uni.getStorageSync('login')
		// 通过_id来获取当前信息的内容
		const {
			_id
		} = options
		http.post('/getDetail', {
			_id
		}).then((res) => {
			const {
				data
			} = res
			infodata.value = data
			commentLength.value = infodata.value.commentList.length
		})
		const openid = uni.getStorageSync('openid')

		// 通过_id和openid来查询是否收藏
		http.post("/checkCollection", {
			id: _id,
			openid: openid
		}).then((res) => {
			const {
				data
			} = res
			if (data.length > 0) {
				collecticon.value = collecticon.value.reverse()
			}
		})
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		});
	})
	onShow(() => {})
</script>

<style lang="less">
	.body {
		margin-bottom: 200rpx;
	}

	.noComment {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.noComment-text {
			color: rgba(126, 126, 126, 0.7);
			font-size: 15px;
		}
	}

	.fav-btn {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: rgba(0, 122, 255, 0.4);
		bottom: 30px;
		left: 10px;

		.favicon {
			width: 40rpx;
			height: 40rpx;
			color: #fff;
		}
	}

	.model {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 40rpx;
		box-sizing: border-box;
		width: 300px;

		.img {
			width: 100%;
			height: 300rpx;
			margin: 20rpx 0;
		}

		.button-list {
			display: flex;

		}
	}

	.banner {
		height: 450rpx;

		.banner-image {
			height: 100%;
			width: 100%;
		}
	}

	.name {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		font-weight: bold;
	}

	.container {
		background-color: #fff;
		margin-top: 20rpx;

		.item {
			padding: 30rpx;
			display: flex;
			align-items: center;
		}

		.label {
			width: 70rpx;
			color: #999999;
			font-size: 26rpx;
			margin-right: 10rpx;
		}

		.desc {
			padding: 20rpx;
			width: 95vw;
			height: 100rpx;
			text-overflow: ellipsis;
			overflow-y: scroll
		}

	}

	.comment-btn {
		height: 40rpx;
		width: 60rpx;
		border-radius: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0fbcfa;
	}

	.comment {
		background-color: #fff;
		margin-top: 20px;
		box-sizing: border-box;
		max-height: 565rpx;
		overflow: scroll;

		.comment-list {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;

			.commen-item {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
				border: 2px dashed skyblue;
				padding: 5px;

				.comment-item-top {
					display: flex;
					flex-direction: column;

					.commen-user {
						display: flex;
						align-items: center;

						.commen-name {
							font-size: 12px;
						}

						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							margin-right: 10px;
						}

					}

					.content {
						margin-left: 30px;
						font-size: 13px;
						width: 300px;
						word-break: break-all;
					}
				}

				.comment-item-bottom {
					font-size: 20rpx;
					text-align: right;
					margin-top: 10px;
				}
			}
		}
	}

	.bottom {
		display: flex;
		position: sticky;
		bottom: 0;
		height: 30%;
		width: 100%;
		border-top: 1px solid #999999;
		background-color: #fff;
		justify-content: space-around;
		align-items: center;
		padding: 15rpx;
		box-sizing: border-box;
		z-index: 999;

		.fav-renling {
			width: 18%;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f3f3f3;
			font-size: 12px;
		}

		.bottom-mid {
			margin: 0 20rpx 20rpx 0;
		}

		.bottom-left {
			display: flex;
			align-items: center;
			background-color: #f3f3f3;
			border-radius: 30rpx;
			padding: 10rpx;
			width: 50%;
			color: #999999;

			.fav-text {
				width: 95%;
				padding-left: 15rpx;
				font-size: 12px;
				color: black;
			}

			.icon-commnet {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>